<!-- 
    头部标签导航
    标签页组件化
    组件功能独立，不需要与其他组件通信
-->
<template>
    <div class="tag-list" ref="scroll_x" @mousewheel="handelScroll">
        <template v-for="(item, index) in openTags" :key="item.fullPath">
            <el-dropdown @command="handlerCommand" @contextmenu.native="handelRightClick" trigger="contextmenu">
                <el-tag :class="{ 'is-active': item.fullPath == route.fullPath }"
                    :effect="item.fullPath == route.fullPath ? 'dark' : 'plain'" @click="handlerClickTag(index)"
                    @close="handlerRemoveTab(index)" type="info" :closable="item.fullPath == '/index/homepage' ? false : true">
                    <el-icon class="active-icon" v-show="route.fullPath == item.fullPath">
                        <Location />
                    </el-icon>
                    <span>{{ $t(item.meta.title) }}</span>
                </el-tag>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :icon="RefreshRight" :command="{ code: 1, fullPath: item.fullPath }">
                            刷新
                        </el-dropdown-item>
                        <el-dropdown-item :icon="Close" :disabled="index == openTags.length - 1 || openTags.length == 1"
                            :command="{ code: 2, fullPath: item.fullPath }">
                            关闭右侧标签
                        </el-dropdown-item>
                        <el-dropdown-item :icon="CircleClose" :disabled="openTags.length == 1"
                            :command="{ code: 3, fullPath: item.fullPath }">
                            全部关闭
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </template>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { RefreshRight, Close, CircleClose } from '@element-plus/icons-vue'//ui图标
import {  useRoute, type RouteLocationNormalizedLoaded } from 'vue-router';
import { useTagsStore } from '@/stores/tags'//数据持久化
const store = useTagsStore()
const openTags = computed(() => store.tagList)
const scroll_x = ref() //标签页滚动
const route = useRoute()//路由---获取路由参数

// 监听路由
watch(route, (route) => {
    let index = -1
    if ("creategoods" === route.name || "editgoods" === route.name) {
        let findIndex = openTags.value.findIndex(item => "goods" === item.name);
        if (-1 !== findIndex) {
            // 让商品编辑和商品创建在商品列表后面打开
            index = findIndex + 1
        }
    }
    store.pushTag(route,index)
});
// 创建后时，添加当前路由

function handlerRemoveTab(index: number) {
    store.removeTag(index)
}
// 单击标签页
function handlerClickTag(index: number) {
    store.clickTag(index)
}
// 菜单点击处理事件
function handlerCommand({ code, fullPath }: { code: number, fullPath: string }) {
    let open_Tags = openTags.value
    switch (code) {
        case 1://刷新
            let refreshIndex = open_Tags.findIndex((item) => item.fullPath == fullPath)
            store.refressh(refreshIndex)
            break;
        case 2://关闭右侧
            let index = open_Tags.findIndex((item) => item.fullPath == fullPath)
            store.closeRight(index)
            break;
        case 3://关闭全部
           store.colseAll()
            break;

    }
}
//右击标签,模拟点击时间，隐藏弹出下拉框
function handelRightClick() {
    document.body.click()
}
//横向滚动
function handelScroll(e: any) {
    console.log(e, '滚动了');
    const scrollLeft = scroll_x.value.scrollLeft;
    const offsetWidth = scroll_x.value.offsetWidth;
    const scrollWidth = scroll_x.value.scrollWidth;
    if (e.wheelDelta < 0 && scrollLeft + offsetWidth < scrollWidth) {
        scroll_x.value.scrollLeft =
            scroll_x.value.scrollLeft + 100;
    } else if (e.wheelDelta > 0 && scrollLeft > 0) {
        scroll_x.value.scrollLeft =
            scroll_x.value.scrollLeft - 100;
    }
}

</script>
<style scoped lang="less">
// 标签页样式
.tag-list {
    border: 1px solid var(--el-fill-color-dark);
    padding: 8px 20px;
    box-shadow: var(--el-fill-color-dark) 0 7px 4px -7px;
    display: flex;
    overflow-x: hidden;

    &::-webkit-scroll-bar {
        display: none;
    }

    .el-tag {
        margin-right: 7px;
        // 去掉默认样式
        border-radius: 0;
        height: 28px;
        line-height: 28px;
        color: var(--el-fill-color-regular);
        cursor: pointer;
        border-radius: 2px;

        .el-icon {
            position: relative;
            top: 1.8px;
        }
    }

    .is-active {
        background-color: #3E9EF9;
        color: white;
        border: 0;
    }
}
</style>


